練習

import { TranslateModule, TranslateLoader, TranslatePipe } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideClientHydration(),
    provideAnimationsAsync(),
    provideHttpClient(),
    /** * Collects providers from all NgModules and standalone components, including transitively imported
 * ones. */
    importProvidersFrom(
      TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient]
        },
        defaultLanguage: 'en'

      })
    )
  ],
};

// required for AoT
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

angular.json

assets-configuration

    "assets": [
              "src/assets",
              {
                "glob": "**/*",
                "input": "public/assets/i18n/",
                "output": "/assets/i18n/"
              },
              {
                "glob": "favicon.ico",
                "input":"public/",
                "output": "/"
              }
            ],

imports: [TranslateModule], (整包import)

@Component({
  selector: 'app-day-11-page',
  standalone: true,
  imports: [TranslateModule],
  templateUrl: './day-11-page.component.html',
  styleUrl: './day-11-page.component.scss'
})
export class Day11PageComponent {
}

<div>{{ 'HELLO' | translate:{value:"Alan"} }}</div>